﻿@namespace BootstrapBlazor.Components
@inherits BootstrapComponentBase

<div class="scanner" @ref="@ScannerElement" data-autostop="@AutoStopString" data-scan="@ScanType">
    @if (ScanType == ScanType.Camera)
    {
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12">
                    <div class="scanner-buttons btn-group">
                        <Button data-method="scan" Color="Color.Primary" Text="@ButtonScanText" IsDisabled="@Disabled"></Button>
                        <Button data-method="close" Color="Color.Danger" Text="@ButtonStopText" IsDisabled="@Disabled"></Button>
                    </div>

                    <Checkbox DisplayText="@AutoStopText" ShowAfterLabel="true" @bind-Value="@AutoStop" class="ml-3" />
                </div>
                <div class="form-group col-12 scanner-devices">
                    <Select Items="@Devices" @bind-Value="@DeviceId" DisplayText="@DeviceLabel" ShowLabel="true" placeholder="@InitDevicesString" />
                </div>
                <div class="form-group col-12 scanner-video">
                    <video id="@GetHashCode()"></video>
                </div>
            </div>
        </div>

    }
    else
    {
        <div class="scanner-buttons">
            <Button data-method="scanImage" Color="Color.Primary" Text="@ButtonScanText"></Button>
            <img class="scanner-image" />
        </div>
    }
</div>
